(function ($) {

    $.fn.webForm = function (options) {

        // This is the easiest way to have default options.
        var settings = $.extend({}, $.fn.webForm.defaults, options);
        var element = this;
        var elementId = element.attr('id');

        //create the form
        this.append("<form id='webToLeadForm' class='" + settings.formClass + "' role='form'></form>");
        $("#" + elementId + " #webToLeadForm").append("<div id='webToLeadFormInner' class='" + settings.formInnerClass + "'></div>");
        $("#" + elementId + " #webToLeadFormInner").append("<div id='webToLeadFormCol1' class='" + settings.column1Class + "'></div>");
        $("#" + elementId + " #webToLeadFormInner").append("<div id='webToLeadFormCol2' class='" + settings.column2Class + "'></div>");

        //now add form components
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showNameField ? "" : "display: none;") + "'>Name</label>" +
            "<input id='name' name='name' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Enter your name *") + "' type='text' style='" + (settings.showNameField ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showFirstNameField ? "" : "display: none;") + "'>First Name</label>" +
            "<input id='firstName' name='firstName' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Enter your first name *") + "' type='text' style='" + (settings.showFirstNameField ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showLastNameField ? "" : "display: none;") + "'>Last Name</label>" +
            "<input id='lastName' name='lastName' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Enter your last name *") + "' type='text' style='" + (settings.showLastNameField ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showEmailField ? "" : "display: none;") + "'>Email</label>" +
            "<input id='email' name='email' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Your Email Address *") + "' type='email' style='" + (settings.showEmailField ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showTelephoneField ? "" : "display: none;") + "'>Telephone</label>" +
            "<input id='telephone' name='telephone' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Telephone Number *") + "' type='text' style='" + (settings.showTelephoneField ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showPostcodeField ? "" : "display: none;") + "'>Postcode</label>" +
            "<input id='postcode' name='postcode' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Enter your Postcode *") + "' type='text' style='" + (settings.showPostcodeField ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showAddressLine1Field ? "" : "display: none;") + "'>Address Line 1</label>" +
            "<input id='addressLine1' name='addressLine1' class='" + settings.inputClass + "' required aria-required='true' placeholder='" + (settings.showFieldLabels ? "" : "Enter the first line of your address *") + "' type='text' style='" + (settings.showAddressLine1Field ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showAppointmentDate ? "" : "display: none;") + "'>Preferred date of contact</label>" +
            "<input id='prefdate' name='prefdate' class='" + settings.inputClass + "' placeholder='" + (settings.showFieldLabels ? "" : "Preferred date of contact *") + "' type='date' style='" + (settings.showAppointmentDate ? "" : "display: none;") + "'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showAppointmentTime ? "" : "display: none;") + "'>Preferred time of contact</label>" +
            "<select id='preftime' name='preftime' class='" + settings.inputClass + "' style='" + (settings.showAppointmentTime ? "" : "display: none;") + "'> " +
            "<option value=''>" + (settings.showFieldLabels ? "" : "Preferred time of contact") + "</option>" +
            "<option value='09:00 - 10:00'>09:00 - 10:00</option>" +
            "<option value='10:00 - 11:00'>10:00 - 11:00</option>" +
            "<option value='11:00 - 12:00'>11:00 - 12:00</option>" +
            "<option value='12:00 - 13:00'>12:00 - 13:00</option>" +
            "<option value='13:00 - 14:00'>13:00 - 14:00</option>" +
            "<option value='14:00 - 15:00'>14:00 - 15:00</option>" +
            "<option value='15:00 - 16:00'>15:00 - 16:00</option>" +
            "<option value='16:00 - 17:00'>16:00 - 17:00</option>" +
            "<option value='17:00 - 18:00'>17:00 - 18:00</option>" +
            "</select>" +
            "</div>");

        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showCompanyBranchField ? "" : "display: none;") + "'>Which branch is your closest?</label>" +
            "<select id='companyBranch' name='companyBranch' class='" + settings.inputClass + "' required aria-required='true' style='" + (settings.showCompanyBranchField ? "" : "display: none;") + "'><option value=''>" + (settings.showFieldLabels ? "" : "Which branch is your closest? *") + "</option> </select>" +
            "</div>");

        //make api call to retrive list of branches
        $.ajax({
            url: settings.crmUrl + "/WebForm/GetAllCompanyBranches/",
            type: "GET",
            data: { APIKey: settings.apiKey },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var item = result;
                $.each(result, function (i, val) {
                    $("#" + elementId + " #webToLeadFormCol1 #companyBranch").append("<option value=" + val.Value + ">" + val.Name + "</option>");
                });
            },
            error: function (result) {
                console.log("Error getting company branches");
            }
        });

        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showProductInterestField ? "" : "display: none;") + "'>Product of Interest</label>" +
            "<select id='product' name='product' class='" + settings.inputClass + "' required aria-required='true'  style='" + (settings.showProductInterestField ? "" : "display: none;") + "'><option value=''>" + (settings.showFieldLabels ? "" : "Product of Interest *") + "</option> </select>" +
            "</div>");

        //make api call to retrive list of product interests
        $.ajax({
            url: settings.crmUrl + "/WebForm/GetAllProductInterests/",
            type: "GET",
            data: { APIKey: settings.apiKey },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var item = result;
                $.each(result, function (i, val) {
                    $("#" + elementId + " #webToLeadFormCol1 #product").append("<option value=" + val.Value + ">" + val.Name + "</option>");
                });
            },
            error: function (result) {
                console.log("Error getting product interests");
            }
        });

        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showProjectTypeField ? "" : "display: none;") + "'>Project Type</label>" +
            "<select id='projecttype' name='projecttype' class='" + settings.inputClass + "' required aria-required='true'  style='" + (settings.showProjectTypeField ? "" : "display: none;") + "'>" +
            "<option value=''>" + (settings.showFieldLabels ? "" : "Type of Project *") + "</option>" +
            "</select>" +
            "</div>");

        //make api call to retrive list of lead sources
        $.ajax({
            url: settings.crmUrl + "/WebForm/GetAllProjectTypes/",
            type: "GET",
            data: { APIKey: settings.apiKey },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var item = result;
                $.each(result, function (i, val) {
                    $("#" + elementId + " #webToLeadFormCol1 #projecttype").append("<option value=" + val.Value + ">" + val.Name + "</option>");
                });
            },
            error: function (result) {
                console.log("Error getting project types");
            }
        });

        $("#" + elementId + " #webToLeadFormCol1").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showLeadSourceField ? "" : "display: none;") + "'>How did you hear about us?</label>" +
            "<select id='leadSource' name='leadSource' class='" + settings.inputClass + "' required aria-required='true' style='" + (settings.showLeadSourceField ? "" : "display: none;") + "'><option value=''>" + (settings.showFieldLabels ? "" : "How did you hear about us? *") + "</option> </select>" +
            "</div>");

        //make api call to retrive list of lead sources
        $.ajax({
            url: settings.crmUrl + "/WebForm/GetAllLeadSources/",
            type: "GET",
            data: { APIKey: settings.apiKey },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var item = result;
                $.each(result, function (i, val) {
                    $("#" + elementId + " #webToLeadFormCol1 #leadSource").append("<option value=" + val.Value + ">" + val.Name + "</option>");
                });
            },
            error: function (result) {
                console.log("Error getting lead sources");
            }
        });

        $("#" + elementId + " #webToLeadFormCol2").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<label class='" + settings.labelClass + "'" + "style='" + (settings.showFieldLabels && settings.showMessageField ? "" : "display: none;") + "'>Your message</label>" +
            "<textarea id='message' name='message' class='" + settings.inputClass + "' placeholder='" + (settings.showFieldLabels ? "" : "Your message") + "' rows='" + settings.messageRows + "' type='text'  style='" + (settings.showMessageField ? "" : "display: none;") + "'></textarea> " +
            "<input id='extraMessage' name='extraMessage' type='hidden'/> " +
            "</div>");
        $("#" + elementId + " #webToLeadFormCol2").append("<div class='" + settings.fieldWrapperClass + "' style='" + (settings.showFileUploadField ? "" : "display: none;") + "'>" +
            "<p>If you would like to upload your plans or an image (max. file size 5MB) please click below and browse to your document.</p>" +
            "<input id='fileUpload' name='fileUpload' size='40' class='' accept='image/*,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword' aria-invalid='false' type='file'  style='" + (settings.showFileUploadField ? "" : "display: none;") + "'/>" +
            "</div>");

        $("#" + elementId + " #webToLeadFormCol2").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<p>" + settings.privacyNotice + "</p>" +
            "</div>");

        $("#" + elementId + " #webToLeadFormCol2").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<p>" + settings.marketingPreferencesNotice + "</p>" +
            "<div id='marketingPrefTypes'></div>",
            "</div>");

        $.ajax({
            url: settings.crmUrl + "/WebForm/GetAllMarketingTypes/",
            type: "GET",
            data: { APIKey: settings.apiKey },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var item = result;
                $.each(result, function (i, val) {
                    $("#" + elementId + " #marketingPrefTypes").append("<div class='checkbox'><label><input style='margin-top:3px; margin-right: 7px;' type='checkbox' value='" + val.Value + "' id='marketingPref_" + i + "'/> " + val.Name + "</label></div>");
                });
            },
            error: function (result) {
                console.log("Error getting marketing types");
            }
        });

        $("#" + elementId + " #webToLeadFormCol2").append("<div class='" + settings.fieldWrapperClass + "'>" +
            "<input id='submitButton' value='" + settings.submitButtonText + "' class='" + settings.submitButtonClasses + "' type='submit'/> " +
            "</div>");




        $("#" + elementId + ' #submitButton').on("click", submitForm);
        function submitForm(e) {
            e.preventDefault();
            $("#" + elementId + " #webToLeadForm").validate();
            if ($("#" + elementId + " #webToLeadForm").valid()) {
                $("#" + elementId + ' #submitButton').attr("disabled", "disabled");
                $("#" + elementId + ' #submitButton').val('Please wait..');
                var data = new FormData();
                var filesElement = $("#" + elementId + ' #fileUpload');
                var files = filesElement[0].files;
                if (files.length > 0) {
                    if (window.FormData !== undefined) {
                        for (var x = 0; x < files.length; x++) {
                            data.append("file" + x, files[x]);
                        }
                    }
                }
                data.append("APIKey", settings.apiKey);
                data.append("formSource", settings.formSourceName);
                var name = $("#" + elementId + ' #webToLeadForm #name').val();
                data.append("name", name);
                var firstName = $("#" + elementId + ' #webToLeadForm #firstName').val();
                data.append("firstName", firstName);
                var lastName = $("#" + elementId + ' #webToLeadForm #lastName').val();
                data.append("lastName", lastName);
                var email = $("#" + elementId + ' #webToLeadForm #email').val();
                data.append("email", email);
                var telephone = $("#" + elementId + ' #webToLeadForm #telephone').val();
                data.append("telephone", telephone);
                var postcode = $("#" + elementId + ' #webToLeadForm #postcode').val();
                data.append("postcode", postcode);
                var addressLine1 = $("#" + elementId + ' #webToLeadForm #addressLine1').val();
                data.append("addressLine1", addressLine1);
                var prefdate = $("#" + elementId + ' #webToLeadForm #prefdate').val();
                data.append("prefdate", prefdate);
                var preftime = $("#" + elementId + ' #webToLeadForm #preftime option:selected').val();
                data.append("preftime", preftime);
                var productInterestId = $("#" + elementId + ' #webToLeadForm #product option:selected').val();
                data.append("productInterestId", productInterestId);
                var projectTypeId = $("#" + elementId + ' #webToLeadForm #projecttype option:selected').val();
                data.append("projectTypeId", projectTypeId);
                var leadSourceId = $("#" + elementId + ' #webToLeadForm #leadSource option:selected').val();
                data.append("leadSourceId", leadSourceId);
                var companyBranchId = $("#" + elementId + ' #webToLeadForm #companyBranch option:selected').val();
                data.append("companyBranchId", companyBranchId);
                var message = $("#" + elementId + ' #webToLeadForm #message').val();
                var extraMessage = settings.getAdditionalMessageTextHandler.call(this);
                if (extraMessage.length) {
                    message += " " + extraMessage;
                }
                data.append("message", message);


                $("#" + elementId + ' #marketingPrefTypes input[type="checkbox"]:checked').each(function (index, element) {
                    data.append("selectedMarketing[" + index + "]", $(element).val());
                });



                $.ajax({
                    url: settings.crmUrl + "/WebForm/ReceiveLead/",
                    type: "POST",
                    processData: false,
                    data: data,
                    contentType: false,
                    success: function (result) {
                        if (result.success) {
                            settings.submitHandler.call(this);
                        }
                        else {
                            console.log("Error saving enquiry: " + result.message);
                        }
                        $("#" + elementId + ' #submitButton').removeAttr("disabled");
                        $("#" + elementId + ' #submitButton').val(settings.submitButtonText);
                    },
                    error: function (result) {
                        alert("Error saving enquiry");
                        $("#" + elementId + ' #submitButton').removeAttr("disabled");
                        $("#" + elementId + ' #submitButton').val(settings.submitButtonText);
                    }
                });
            }
        }


        $("#" + elementId + " #webToLeadForm").validate();

        return this;
    };

    // Plugin defaults – added as a property on our plugin function.
    $.fn.webForm.defaults = {
        apiKey: "",
        crmUrl: "",
        formSourceName: "Contact",
        formClass: "webToLeadForm",
        formInnerClass: "row",
        column1Class: "col-sm-4",
        column2Class: "col-sm-8",
        fieldWrapperClass: "form-group",
        inputClass: "form-control",
        labelClass: "control-label",
        messageRows: "5",
        showNameField: true,
        showLastNameField: false,
        showFirstNameField: false,
        showEmailField: true,
        showTelephoneField: true,
        showPostcodeField: true,
        showAppointmentDate: true,
        showAppointmentTime: true,
        showProductInterestField: true,
        showProjectTypeField: true,
        showLeadSourceField: true,
        showCompanyBranchField: false,
        showMessageField: true,
        showFileUploadField: true,
        showFieldLabels: true,
        privacyNotice: "This form collects information provided by you so that we may respond to your enquiry. See our Privacy Policy for information about how we collect and store your data.",
        marketingPreferencesNotice: "I give permission to be contacted using the following mediums:",
        submitButtonClasses: "btn btn-primary request-quote",
        submitButtonText: "Submit",
        submitHandler: function () { },
        getAdditionalMessageTextHandler: function () { return ""; }
    };

}(jQuery));